<template>
  <div class="wot-linkage-add">
    <el-button type="text" @click="visible = true">
      <c-icon name="plus"></c-icon>
      {{ multLang('btn_new_a') }}
    </el-button>
    <c-dialog
      custom-class="wot-linkage-add-dialog"
      width="800px"
      :title="multLang('新增联动')"
      :visible.sync="visible"
    >
      <c-row :col="12" class="wot-linkage-add-btn">
        <c-col right>
          <c-icon-btn name="plus"></c-icon-btn>
        </c-col>
      </c-row>
      <c-table height="260px" :col="col">
        <template #opn="{ row }">
          <el-button type="text" @click="del(row)">
            <c-icon name="delete"></c-icon>
            <span>
              {{ multLang('btn_delete_a') }}
            </span>
          </el-button>
        </template>
      </c-table>
      <c-row class="wot-linkage-add-mode" less-width="90px">
        <c-col less="80px" right bottom>
          <span>{{ multLang('来源方式', ' : ') }} </span>
        </c-col>
        <c-col less="10px"></c-col>
        <c-col :col="12">
          <el-radio-group v-model="form.linkage_type">
            <el-radio
              v-for="item in sourceModeList"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </c-col>
      </c-row>
      <div class="wot-linkage-add-bot">
        <c-row v-show="isFieldData" less-width="90px">
          <c-col less="80px" right>
            <span>
              {{ multLang('控件名称', ' : ') }}
            </span>
          </c-col>
          <c-col less="10px"></c-col>
          <c-col>
            <c-select :options="[]"></c-select>
          </c-col>
        </c-row>
        <div v-show="isInterfaceData">
          <c-row less-width="90px">
            <c-col less="80px" right>
              <span>
                {{ multLang('接口名称', ' : ') }}
              </span>
            </c-col>
            <c-col less="10px"></c-col>
            <c-col>
              <c-select :options="[]"></c-select>
            </c-col>
          </c-row>

          <c-row less-width="90px">
            <c-col less="80px" right>
              <span>
                {{ multLang('条件参数', ' : ') }}
              </span>
            </c-col>
            <c-col less="10px"></c-col>
            <c-col> </c-col>
          </c-row>
        </div>
        <c-row v-show="isCustomData" less-width="90px">
          <c-col less="80px" right top>
            <span>
              {{ multLang('数据来源', ' : ') }}
            </span>
          </c-col>
          <c-col less="10px"></c-col>
          <c-col>
            <c-input-text></c-input-text>
          </c-col>
        </c-row>
      </div>
    </c-dialog>
  </div>
</template>
<script>
import { getTemplateFiledData } from '@/http/api/v1/wot'
export default {
  name: 'LinkageAdd',
  components: {},
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      form: {
        linkage_type: 'link_field_form_code',
        link_field_form_code: '',
        self_defined: '',
        interface_address: '',
        condition: {
          top: [],
          interface: []
        }
      },
      fieldData: []
    }
  },
  computed: {
    constraintConditionList() {
      return this.optionList('constraint_condition')
    },
    sourceModeList() {
      return this.optionList('source_mode')
    },
    interfaceAddressList() {
      return this.optionList('interface_address')
    },
    isFieldData() {
      const { value } = this.sourceModeList[0] || {}
      return value === this.form.linkage_type
    },
    isInterfaceData() {
      const { value } = this.sourceModeList[1] || {}
      return value === this.form.linkage_type
    },
    isCustomData() {
      const { value } = this.sourceModeList[2] || {}
      return value === this.form.linkage_type
    },
    col() {
      return [
        {
          label: '控件名称'
        },
        {
          label: '条件'
        },
        {
          label: '数据'
        }
      ]
    }
  },
  watch: {
    data() {
      console.log('getField', JSON.stringify(this.data))
      this.getField()
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'constraint_condition' })
    this.setOption({ key: 'source_mode' })
    this.setOption({ key: 'interface_address' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    getField() {
      const { work_template_code } = this.data
      work_template_code &&
        getTemplateFiledData({ work_template_code }).then(res => {
          console.log(res)
        })
    },
    del(row) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_ng']),
        this.multLang('btn_delete_a', 'title_ng'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        console.log(row)
      })
    }
  }
}
</script>
<style lang="scss">
.wot-linkage-add {
  &-dialog {
    height: 600px;
  }
  &-mode {
    margin: 10px 0;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
  }
  &-btn {
    margin-bottom: 10px;
  }
  &-bot {
    border: 1px solid #eee;
    padding: 18px 10px 0px 10px;
    .c-row {
      margin-bottom: 18px;
    }
  }
}
</style>
